<template>
	<div class="question-result-wrapper">
		<div
			v-for="(slice, index) in sliceList"
			:key="index"
			:class="`module-wrapper module-wrapper-${index}`"
		>
			<div class="module-title-wrapper">
				<p>{{ moduleNameList[index] }}</p>
			</div>
			<div v-if="false" class="fragment-btn-wrapper">
				<Plus />
				<p>{{ moduleNameList[index] }}片段</p>
			</div>
			<div v-if="slice?.length" class="fragment-content-wrapper">
				<div
					v-for="item in slice"
					:key="item.sliceId"
					class="content-item"
					@click="onContentItemClickHandle(item.startTime)"
				>
					<div class="top-wrapper">
						<div class="left-info">
							<div class="time">
								<span v-if="item.startTime || item.startTime === 0">{{
									formatSeconds(item.startTime / 1000)
								}}</span>
								<span
									v-if="
										(item.startTime || item.startTime === 0) && (item.endTime || item.endTime === 0)
									"
									>-</span
								>
								<span v-if="item.endTime || item.endTime === 0">{{
									formatSeconds(item.endTime / 1000)
								}}</span>
							</div>
							<div v-if="false" class="edit-icon">
								<img src="@/assets/images/lessonAnalysisDetails/text-edit-normal.png" />
								<Delete />
							</div>
						</div>
						<div v-if="item.qusType" class="right-info">
							<div class="right-info-btn">
								{{ qusTypeMap[item.qusType] }}
							</div>
						</div>
					</div>
					<div v-if="item.title" class="title-wrapper">{{ item.title }}</div>
					<div v-if="item.summary" class="detail-wrapper">{{ item.summary }}</div>
				</div>
			</div>
			<div v-else class="detail">
				<p>本堂课暂无{{ moduleNameList[index] }}。</p>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { formatSeconds } from '@/assets/js/utils';
import { getErrorMessage, getSliceByLessonCodeAPI, getLLMTeacherLeadQusAPI } from '@/api/index';
import type { SliceListItemType } from './QuestionResult.type';

const props = withDefaults(
	defineProps<{
		lessonCode: string;
	}>(),
	{
		lessonCode: ''
	}
);

const emit = defineEmits<{
	(e: 'changeVideoTime', time: number): void; // 切换视频时间
}>();

const moduleNameList = ref<string[]>(['课堂提问', '鼓励学生提问', '操作演示']);

const qusTypeMap = ref<Record<number, string>>({
	1: '事实性提问',
	2: '解释性提问',
	3: '应用性提问',
	4: '分析性提问',
	5: '评价性提问',
	6: '创造性提问'
});

// 切片信息
const sliceList = ref<SliceListItemType[][]>([]);
onMounted(async () => {
	const arr = await Promise.all([
		getLLMTeacherLeadQus(),
		getSliceByLessonCode(['outline-lecture-studentShow']),
		getSliceByLessonCode(['outline-lecture-operationShow'])
	]);
	sliceList.value = arr;
});

// 获取切片信息
const getSliceByLessonCode = async (indicatorCodes: string[]): Promise<SliceListItemType[]> => {
	try {
		const data = await getSliceByLessonCodeAPI({
			lessonCode: props.lessonCode,
			indicatorCodes: indicatorCodes || undefined
		});

		return data || [];
	} catch (err) {
		console.error(getErrorMessage(err));
		return [];
	}
};

// 查询教师引导提问
const getLLMTeacherLeadQus = async (): Promise<SliceListItemType[]> => {
	try {
		const data = await getLLMTeacherLeadQusAPI({
			businessCode: props.lessonCode,
			businessType: 1
		});

		return data?.length ? data.map((item) => ({ ...item, sliceId: item.id })) : [];
	} catch (err) {
		console.error(getErrorMessage(err));
		return [];
	}
};

// 点击内容项
const onContentItemClickHandle = (time: number) => {
	emit('changeVideoTime', time / 1000);
};
</script>

<style lang="scss" scoped>
.question-result-wrapper {
	.module-wrapper {
		margin-top: 1.6rem;
	}
}
</style>
